<template>
  <div class="container">
    <button  @click="showMulLinkageTwoPicker" class="btn">选择年级科目</button>
    <mp-picker ref="mpPicker" :mode="mode"  :pickerValueDefault="pickerValueDefault"
               @onConfirm="onConfirm"  :pickerValueArray="pickerValueArray"></mp-picker>
  </div>
</template>

<script>
  import mpPicker from 'mpvue-weui/src/picker'
  export default {
    components: {
      mpPicker
    },
    data () {
      return {
        mode: 'multiLinkageSelector',
        pickerValueArray: [
          {
            label: '语文',
            value: '语文',
            children: [
              {
                label: '一年级',
                value: '一年级'
              },
              {
                label: '二年级',
                value: '二年级'
              },
              {
                label: '三年级',
                value: '三年级'
              },
              {
                label: '四年级',
                value: '四年级'
              },
              {
                label: '五年级',
                value: '五年级'
              },
              {
                label: '六年级',
                value: '六年级'
              }
            ]
          },
          {
            label: '数学',
            value: '数学',
            children: [
              {
                label: '一年级',
                value: '一年级'
              },
              {
                label: '二年级',
                value: '二年级'
              },
              {
                label: '三年级',
                value: '三年级'
              },
              {
                label: '四年级',
                value: '四年级'
              },
              {
                label: '五年级',
                value: '五年级'
              },
              {
                label: '六年级',
                value: '六年级'
              }
            ]
          },
          {
            label: '英语',
            value: '英语',
            children: [
              {
                label: '一年级',
                value: '一年级'
              },
              {
                label: '二年级',
                value: '二年级'
              },
              {
                label: '三年级',
                value: '三年级'
              },
              {
                label: '四年级',
                value: '四年级'
              },
              {
                label: '五年级',
                value: '五年级'
              },
              {
                label: '六年级',
                value: '六年级'
              }
            ]
          }
        ],
        pickerValueDefault: [1, 0]
      }
    },
    methods: {
      showMulLinkageTwoPicker () {
        this.$refs.mpPicker.show()
      },
      onConfirm (e) {
        this.$store.state.managerSubject = e.value[0]
        this.$store.state.managerGrade = e.value[1]
        wx.navigateTo({
          url: '/pages/manager-roundbtn/main'
        })
      }
    }
  }
</script>

<style scoped>
  .btn {
    width: 300rpx;
    height: 300rpx;
    border-radius: 150rpx;
    margin:100rpx 0;
    line-height: 300rpx;
    text-align: center;
    font-size: 35rpx;
  }
  .container {
    display:flex;
    align-items:center;
    flex-direction:column;
  }

  .btn {
    background: dodgerblue;
    font-family: "华文楷体";
    font-size: 18px;
    color: #ffffff;
  }
</style>
